
import TableList from "@components/templates/customtablelist";
import { HttpSettingInvoceList,HttpCarrierAllList } from '@/service/api/views'
import { mapState,mapGetters } from "vuex";
import compUpdate from './update';
import { Tooltip } from "view-ui-plus";
export default {
    mixins: [TableList],
    components: {
        compUpdate,
    },
    data() {
        return {
            // totals: 0,
            isMixin: true,
            Tools: {show: true},
            Tabs: {show: true},
            formData:{
                search:{
                }
            },
            Searchs: {
                show: true,
                labelWidth: 120,
            },
            Plugins: {show: true},
            carrierList:[],
        }
    },
    created(){
        HttpCarrierAllList().then(res=>{
            this.carrierList = res.data.map(item=>{
                return {
                    value:item.carrierCode,
                    label:item.carrierCode+' ('+item.carrierName+')',
                }
            })
        })
    },
    methods: {
        ajaxRequest: HttpSettingInvoceList,
        handleOperates(params="", type,batch) {
            if(batch===true){
                params=(params||this.checkedData.join(','))+'';
                if(!params.length) return this.$Message.warning('请选择至少一条数据');
            }
            switch (type) {
                case 'add':
                    this.$router.push({
                        name: 'settingOrgsetUpdate',
                        params: { type: "add" },
                    });
                    break;
                case 'query':
                    this.operate = {
                        title: '查看',
                        show: true,
                        width: 1200,
                        component: "compUpdate",
                        activeid: params,
                        querytype: 'query',
                        showFooter: false,
                    }
                    break;
                case 'edit':
                    var url = this.$router.resolve({
                        name: "settingOrgsetUpdate",
                        params: { type: "edit" },
                        query: { id: params },
                    });
                    window.open(url.href, '_blank');
                    break;
                case 'download':
                    this.handleWebfs(
                        process.env.VUE_APP_APIURL_SHIP + "/api/jwt/spl/freeze/exportFreezeManage",{},
                        "download"
                    );
                    break;
                
            }
        },
        getOperateNodeMap (row) {
            const { orgId } = row
            return [{
                label: this.$ct('global.common.query', { defaultValue: '查看' }),
                show: true,
                params: orgId,
                operate: 'query'
            }, {
                label: this.$ct('global.common.operation_edit', { defaultValue: '编辑' }),
                show: true,
                params: orgId,
                operate: 'edit'
            }]
        },
    },
    computed: {
        ...mapGetters('dictionary',['getSysAllList']),
        // 搜索下拉框展示内容
        SearchsData() {
            return  [
                {
                    label: '承运商账号',
                    tag: 'Input',
                    key: 'EQ_account',
                    show:true,
                },
                {
                    label: '账单号',
                    tag: 'Input',
                    key: 'EQ_billNo',
                    show:true,
                },
                {
                    label: '承运商',
                    tag: 'Select',
                    key: 'EQ_carrierCode',
                    options:this.carrierList,
                    show:true,
                    props:{
                        filterable:true
                    }
                },
                {
                    label: '账单状态',
                    tag: 'Select',
                    key: 'EQ_consumeType',
                    options:[
                        {value:0,label:'未对账'},
                        {value:1,label:'已对账'},
                    ],
                    show:true,
                },
                
            ]
        },
        // ToolsData () {
        //     return [
        //         {
        //             name: "添加",
        //             theme: 'primary',
        //             operate: 'add',
        //         },
        //     ]
        // },
        // table的展示数据
        columns() {
            return [ {
                title: "承运商",
                key: "carrierCode",
                render:(h,{row})=> {
                    return <div>
                        <div v-show={row.carrierCode == 'UPS'}><img src="/img/ups.png" style="vertical-align: bottom;width:18px;margin-right:5px" />{row.carrierCode}</div>
                        <div v-show={row.carrierCode == 'Fedex'}><img src="/img/fedex.png" style="vertical-align: middle;width:30px;margin-top:-3px;margin-right:5px" />{row.carrierCode}</div>
                        
                    </div>
                },
                
            },{
                title: "承运商账号",
                key: "account",
            },{
                title: "账单号",
                key: "billNo",
                // render:(h,{row})=> {
                //     return <div>
                //         <a onClick={this.handleOperates.bind(this, row.orgId, 'query')}>{row.billNo}</a>
                //     </div>
                // },
            },{
                title: "账单日期",
                key: "invoiceDate",
                
                
            },{
                title: "账单金额",
                key: "consumeType",
                render:(h,{row})=> {
                    return <div>
                        {row.cost} {row.currency}
                    </div>
                },
                
            },{
                title: "来源",
                key: "sourceType",
                align:'center',
                width:90,
                render:(h,{row})=> {
                    return <div>
                        <div v-show={row.sourceType == 1}>
                            <Tooltip content="人工导入"><img src="/img/rengong.png" style="vertical-align: bottom;width:16px" /></Tooltip>
                        </div>
                        <div v-show={row.sourceType != 1}>
                            <Tooltip content="系统采集"><img src="/img/xitong.png" style="vertical-align: bottom;width:24px" /></Tooltip>
                        </div>
                        
                    </div>
                },
            },
            {
                title: "匹配系统%",
                key: "systemCompare",
                render:(h,{row})=> {
                    return <div>
                        <Space direction="vertical" type="flex">
                            <Progress percent={row.systemCompare || 0} />
                        </Space>
                    </div>
                },
            },
            {
                title: "账单状态",
                key: "sourceType",
                render:(h,{row})=> {
                    return <div>
                        <Tag type="border" v-show={row.status === 1} color="success">已对账</Tag>
                        <Tag type="border" v-show={row.status !== 1} color="default">未对账</Tag>
                    </div>
                },
            },
            // {
            //     title: "操作",
            //     key: "sourceType",
            //     render:(h,{row})=> {
            //         return <div>
                        
            //         </div>
            //     },
            // },
        ];
        },
        
    },

};
